<template>
  <div class="teacher-mine-title">
    我的班级
  </div>

  <el-divider
    style="margin: 0; border-width: 1px;"
  ></el-divider>

  <div class="my-class">
    <div class="teacher-mine-button" @click="click1">
      <div class="teacher-mine-item">软件2401班</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
      style="margin: 0;"></el-divider>
    <div v-show="isAdded === 1" class="teacher-mine-button" @click="click1">
      <div class="teacher-mine-item">软件2402班</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
      v-show="isAdded === 1"
      style="margin: 0;"></el-divider>
    <div style="display: flex; justify-content: center;">
      <Sidebar />
    </div>
    <el-button
      class="teacher-mine-quit"
      type="primary"
      @click="show">
      <div class="teacher-mine-item">创建班级</div>
    </el-button>
  </div>

  <el-dialog v-model="dialogFormVisible" title="请输入班级名称" width="80%">
    <el-input v-model="name">

    </el-input>
    <div style="margin-top: 2%" v-show="pwdShowed === 1">
      您的班级代码为:
      <span style="font-weight: bold">3749ns</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="!pwdShowed" type="primary" @click="create">
          确认创建
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Sidebar from '@/components/Sidebar.vue'
import router from '@/router';
import { ElMessage } from 'element-plus'

const isAdded = ref(0)
const dialogFormVisible = ref(0)
const name = ref('')
const pwdShowed = ref(0)

const show = () => {
  dialogFormVisible.value = 1
}

const create = () => {
  // dialogFormVisible.value = false
  pwdShowed.value = 1
  isAdded.value = 1
  ElMessage({
    type: 'success',
    message: '创建成功！'
  })
}

</script>

<style scoped>
.teacher-mine-title {
  font-size: 21px;
  padding: 2% 0;
}

.my-class {
  height: 92%;
  background-color: #f5f6f8;
}

.teacher-mine-button {
  width: 100%;
  height: 5%;
  display: flex;
  padding: 1% 0;
  background-color: white;
  justify-content: space-between;
  align-items: center;
}

.teacher-mine-button .teacher-mine-item {
  margin-left: 5%;
  font-size: 20px;
}

.teacher-mine-quit {
  margin-top: 5%;
  width: 80%;
  height: 5%;
  padding: 1% 0;
  border-radius: 9px;
}
</style>
